<template>
  <div>
    <div class="image-box" ref="downloadRef">
      <div class="text">恭顺安康</div>
      <img class="picture" src="@/assets/images/study-dog.png" alt="" />
    </div>
    <el-button type="primary" plain @click="download">下载图片</el-button>
  </div>
</template>

<script setup>
import { ref } from "vue";
import html2canvas from 'html2canvas'

const downloadRef = ref();
const download = () => {
  html2canvas(downloadRef.value).then((canvas) => {
    let dataURL = canvas.toDataURL("image/png"); //base64格式的图片 url
    // 创建a标签下载图片
    var addElement = document.createElement("a");
    addElement.href = dataURL;
    addElement.download = "恭顺安康.png"; //设置下载的图片名称

    document.body.appendChild(addElement);
    addElement.click();
    document.body.removeChild(addElement);
  });
};
</script>

<style lang="less" scoped>
.image-box {
  width: 500px;
  height: 520px;
  border: 1px solid #ccc;
  background-color: aqua;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-weight: 700;
  font-size: 28px;
  margin-bottom: 10px;

  .text {
    color: #fff;
    margin-bottom: 10px;
  }
  .picture {
    width: 400px;
    height: 400px;
  }
}
</style>
